<template>
  <div style="width: 300px; height: 200px; border: solid 1px red">
    <ElButton>I am {{ flag ? 'blue本体 ' : 'pink影子 ' }} {{ current.name }} , {{ ac }}</ElButton>
    <ElButton @click="show()">show</ElButton>
  </div>
</template>
<script lang="ts" setup>
const current = reactive({
  name: 'kitty'
})
const props = defineProps({
  flag: {
    type: Boolean,
    default: true
  },
  toggleFlag: {
    type: Function,
    default: undefined
  }
})
// const aacc = ref(1)
const ac = computed(() => {
  return current.name.toUpperCase() + props.flag
})
onMounted(() => {
  console.log('xxxx')
})
// watch vue
watch(
  () => props.flag,
  () => {
    console.log('xxxxxxxxxxx')
  }
)
// 被观察者改变后 观察者 自身 可能不发生数值变化，但是要运行部分代码
// 副作用函数
// useEffect
watchEffect(() => {
  console.log('yyyyy' + current.name + props.flag)
})
// watchEffect  mounted + updated + unmounted

// effect

// const bc = computed(()=>{
//   return (props.flag+"_").toUpperCase()
// })
const emit = defineEmits(['modifyFlag', 'xxx'])
const show = () => {
  console.log('xxxx')
  // 读取data属性
  console.log(current.name)
  // 读取prop属性 flag
  console.log(props.flag)
  // 写 data属性 修改data属性
  current.name = 'lucy'
  // 写 prop属性 修改prop属性
  // props.flag = !props.flag
  // vue 推崇 事件 > 属性
  emit('modifyFlag')
  // props.toggleFlag()
  // if(props.toggleFlag) {
  //   props.toggleFlag()
  // }
  props.toggleFlag && props.toggleFlag()
}

const ex1 = () => {
  console.log('current.name', current.name)
}
const ex2 = () => {
  console.log('current.name', current.name)
}
defineExpose({ ex1 })
</script>
<style lang="scss" scoped></style>
